<template>
  <div :id="config.key">
    <video
      v-if="config.__config.mediaSrc"
      :src="videoSrc"
      :autoplay="isEdit ? false : config.__config.autoplay"
      :controls="config.__config.controls"
      :loop="config.__config.loop"
      :muted="config.__config.muted"
      :style="style"
      v-bind="options"
    ></video>
    <div v-else class="static-media__no-data static-media__no-data--pure">
      请配置视频
    </div>
  </div>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
export default {
  name: "VideoMedia",
  computed: {},
  mixins: [myMixin, vmMixin],
  components: {},
  data() {
    return {};
  },

  computed: {
    path() {
      return process.env.VUE_APP_ROOT_URL !== "./" ? "/paas" : "";
    },
    videoSrc() {
      const { mediaLocation: type, mediaSrc: src } = this.config.__config;
      if (type === "remote") {
        return src;
      } else if (process.env.NODE_ENV === "production") {
        return location.origin + this.path + src;
      } else {
        return "https://hanma-paas-dev.hancode.com" + this.path + src;
      }
    },
    posterSrc() {
      const { posterType: type, posterSrc: src } = this.config.__config;
      if (type === "remote") {
        return src;
      } else if (process.env.NODE_ENV === "production") {
        return location.origin + this.path + src;
      } else {
        return "https://hanma-paas-dev.hancode.com" + this.path + src;
      }
    },
    style() {
      const {
        widthUnit,
        widthValue,
        heightUnit,
        heightValue,
      } = this.config.__config;
      return {
        display: "block",
        width: widthValue + widthUnit,
        height: heightValue + heightUnit,
      };
    },
    options() {
      if (this.config.__config.posterSrc) {
        return {
          poster: this.posterSrc,
        };
      } else {
        return {};
      }
    },
  },

  async mounted() {},
  methods: {},
};
</script>

<style lang="scss">
.static-media {
  &__no-data {
    color: #ccc;
    font-size: 14px;

    &--pure {
      text-align: center;
      line-height: 48px;
    }
  }
}
</style>
